import React from 'react';
import 'core-js/fn/object/assign';
import WrapListComponent from './../components/WrapListComponent.jsx';
import PListComponent from './../components/PListComponent.jsx';
import classNames from 'classnames/bind';
import styles from 'css/components/app';
const cx = classNames.bind(styles);


/*
 * Note: This is kept as a container-level component, 
 *  i.e. We should keep this as the container that does the data-fetching 
 *  and dispatching of actions if you decide to have any sub-components.
 */
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../actions';
import {fromJS} from 'immutable';

const mapStateToProps = state =>{
  return {
    list: state.list.toJS(),
    navArrList:state.navArrList.toJS()
  }
}

const mapDispatchToProps = dispatch =>{
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}

@connect(mapStateToProps,mapDispatchToProps)
export default class List extends React.Component {
  constructor(props,context){
    super(props,context);
    this.handleChange = this.handleChange.bind(this);
    this.state={"list_header_ad":"","card":{},"plistData":[],"wraplistData":[],"hotData":[],isMobile:false}

  }

  static fetchData(params){
    return [Actions.getPidInfo(params.pid),Actions.getPidHotData(params.pid),Actions.getPidWraplistData(params.pid,0),
           Actions.getPidPlistData(params.pid,0)]
  }

  handleChange(e,option){
    e.preventDefault()
  }
  componentWillMount(){
    this.setState(
        {
         // "list_header_ad":"//wa.gtimg.com/website/201611/unknown_D_20161101135718.jpg",
          "list_header_ad":"",
          "list_right_ad":"http://img1.gtimg.com/ninja/2/2016/11/ninja147925726284341.jpg",
          "plistData":[],
          "wraplistData":[]
        })

  }
  componentDidMount(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    this.setState({"isMobile":(isiOS||isAndroid)});
// console.log("line 136=====>");
 // console.log(this.props.list.hotData);
    var hotData=[];
    if(this.props.list.hotData[this.props.params.pid])
    this.props.list.hotData[this.props.params.pid].forEach(function(e){
      hotData.push({title:e.title,id:e.id,url:"/detail/"+e.id})
    });

      var wrapListData=[]
     if( this.props.list.wrapListData[this.props.params.pid])
      this.props.list.wrapListData[this.props.params.pid].data.forEach(function(e){
        wrapListData.push({
          title:e.title,
          images:e.cover,
          url:"/detail/"+e.id,
          commentCount:e.comment?e.comment:0
        })
      });

    var  pListData=[];
    if( this.props.list.pListData[this.props.params.pid])
    this.props.list.pListData[this.props.params.pid].data.forEach(function(e,index){
      pListData.push({
        title:e.title,
        images:e.pic,
        url:"/detail/"+e.id,
        commentCount:e.comment?e.comment:0
      })
    });

console.log(wrapListData)
    this.setState({"card":{
      url:"/detail/"+this.props.list.pidInfo[this.props.params.pid]["id"],
      imgUrl:this.props.list.pidInfo[this.props.params.pid]["cover"],
      title:this.props.list.pidInfo[this.props.params.pid]["title"],
      subtitle:"",
      "desc":this.props.list.pidInfo[this.props.params.pid]["description"]
    },hotData:hotData,wraplistData:wrapListData,plistData:pListData});


  }

  getWrapListDataMore(){
    this.props.actions.getPidWraplistData(this.props.params.pid,this.props.list.wrapListData[this.props.params.pid].start);
    var wraplistData=[]
    if(this.props.list.wrapListData[this.props.params.pid])
    this.props.list.wrapListData[this.props.params.pid].data.forEach(function(e){
      wraplistData.push({
        title:e.title,
        images:e.cover,
        url:"/detail/"+e.id,
        commentCount:e.comment?e.comment:0
      })
    });
    this.setState({"wraplistData":wraplistData});
  }

  goTop(){
    var time = setInterval(function () {
      document.body.scrollTop = document.body.scrollTop - 50;
      if (document.body.scrollTop === 0) {
        clearInterval(time);
      }
    }, 1);
  }
  render() {
   var parent=this;
    const { actions, list} = this.props;
    return (
        <div className={cx("main-body")}>
        <div className={cx("list-left")}>
            {
                this.state.list_header_ad?[
                    <div className={cx("list-header-ad")}>
                        <img src={this.state.list_header_ad}/>
                    </div>
                ]:null
            }

          <div className={cx("card-div")}>
            <a href={this.state.card.url}  target={parent.state.isMobile?'_self':'_blank'}>
              <p ><img src={this.state.card.imgUrl}/></p>
              <p>{this.state.card.title}</p>
              <p>{this.state.card.desc}</p>
              </a>
          </div>
               <div className={cx("major")}>
                  {
                    this.state.plistData.map(function(item,index){
                      return (
                          <PListComponent data={item} key={'plist_'+index}/>
                      )
                    })
                  }
                  {
                    this.state.wraplistData.map(function(item,index){
                      return (
                          <WrapListComponent  data={item} key={'wraplist_'+index}/>
                      )
                    })
                  }
              </div>
                  <div className={cx("showMore")} onClick={()=>this.getWrapListDataMore()} > >>查看更多</div>
              </div>
            <div className={cx("list-right")}>
                <div className={cx("hot-list")}>
                  <div className={cx("hot-title")}>热门排行榜</div>
                  <ul>
                    {
                      this.state.hotData.map(function(item,index){
                        return(
                            <li key={'hot_list'+index}>
                              <a href={item.url}>
                              <p className={cx(index<3?'hot-list-title hot-list-title-active':'hot-list-title')} name={index+1} >{item.title}</p>
                              </a>
                            </li>
                        )
                      })
                    }

                  </ul>
                </div>
                {
                    this.state.list_right_ad?[
                        <div className={cx("list-right-ad")}>
                            <img src={this.state.list_right_ad} width="300"/>
                        </div>
                    ]:null
                }

          </div>
          <div className={cx("aScroll")} onClick={()=>this.goTop()}></div>

   </div>
  );
  }
  
};
